<template>
  <el-dialog
    class
    :title="title"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    width="1000px"
  >
    <el-tabs type="border-card" v-model="actived" @tab-click="tabChange">
      <el-tab-pane
        :label="tab.label"
        :name="tab.value"
        v-for="tab in dict.type.game_type"
        :key="tab.value"
      >
        <div class="form-box">
          <el-form ref="form" :model="form" :rules="rules" label-width="auto" class="demo-ruleForm">
            <el-row :gutter="10">
              <el-col :span="12">
                <el-form-item label="游戏类型" prop="type">
                  <el-select
                    v-model="form.type"
                    @change="selectDialogGameType"
                    placeholder="请选择游戏类型"
                  >
                    <el-option
                      v-for="dict in dict.type.game_type"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="区服" prop="regional">
                  <el-select v-model="form.regional" filterable placeholder="请选择区服">
                    <el-option
                      v-for="dict in regionalArr"
                      :key="dict.dictLabel"
                      :label="dict.dictLabel"
                      :value="dict.dictLabel"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <!-- <el-col :span="4">
            <el-button type="primary" @click="showLable(1)">标签配置</el-button>
              </el-col>-->
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="自编号" prop="gameName">
                  <el-input v-model="form.gameName" placeholder="请输入自编号" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="实名认证" prop="level">
                  <el-select v-model="form.level" placeholder="请选择实名认证" clearable size="small">
                    <el-option
                      v-for="dict in levelArr"
                      :key="dict.dictValue"
                      :label="dict.dictLabel"
                      :value="dict.dictValue"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row v-show="wzry||form.type.indexOf('英雄联盟')>-1">
              <el-col :span="12">
                <el-form-item label="英雄" prop="heroes">
                  <el-input v-model="form.heroes" placeholder="请输入英雄数量" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="皮肤" prop="skins">
                  <el-input v-model="form.skins" placeholder="请输入皮肤数量" />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row v-show="form.type.indexOf('和平精英')>-1">
              <el-col :span="12">
                <el-form-item label="套装" prop="suit">
                  <el-input v-model="form.suit" placeholder="请输入套装" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="枪皮" prop="guns">
                  <el-input v-model="form.guns" placeholder="请输入枪皮" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="出售价格" prop="price">
                  <el-input v-model="form.price" placeholder="请输入价格" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="账号" prop="extractAccount">
                  <el-input v-model="form.extractAccount" placeholder="请输入账号" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="密码" prop="extractPwd">
                  <el-input v-model="form.extractPwd" placeholder="请输入密码" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="手机" prop="extractAccount">
                  <el-input v-model="form.extractTel" placeholder="请输入提取手机" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="成本价格" prop="costPrice">
                  <el-input v-model="form.costPrice" placeholder="请输入成本价格" />
                </el-form-item>
              </el-col>
              <el-col :span="6" v-show="form.type.indexOf('原神')==-1">
                <el-form-item label="营地ID" prop="campId">
                  <el-input v-model="form.campId" placeholder="请输入营地ID" />
                </el-form-item>
              </el-col>
              <!-- <el-col :span="3" v-show="form.type.indexOf('原神')==-1">
            <el-button round @click="gengerRole()">一键获取</el-button>
          </el-col>
          <el-col :span="3" v-show="form.type.indexOf('原神')==-1">
            <el-button type="primary" @click="showModel()" round>图片生成</el-button>
              </el-col>-->
            </el-row>

            <el-row v-show="false">
              <el-col :span="12">
                <el-form-item label="是否特价" prop="accType">
                  <el-switch
                    @change="changeSpecial"
                    v-model="form.accType"
                    active-color="#13ce66"
                    active-value="1"
                    inactive-value="0"
                    inactive-color="#ff4949"
                  ></el-switch>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="特价金额" prop="specialPrice">
                  <el-input
                    v-model="form.specialPrice"
                    :disabled="ifSpecial"
                    placeholder="请输入特价金额"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row v-if="wzry" class="lattle-input2">
              <el-col :span="6">
                <el-form-item label="贵族等级" prop="guizuLevel">
                  <el-input v-model="form.guizuLevel" placeholder="请输入贵族等级" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="贵族积分" prop="guizufen">
                  <el-input v-model="form.guizufen" placeholder="请输入贵族积分" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="五级铭文" prop="wuji">
                  <el-input v-model="form.wuji" placeholder="请输入五级铭文" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="王者印记" prop="yinji">
                  <el-input v-model="form.yinji" placeholder="请输入王者印记" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-form-item label="账号备注" prop="sinNum">
                <el-input v-model="form.sinNum" type="textarea" placeholder="请输入内容" :rows="4" />
              </el-form-item>
            </el-row>
            <el-form-item label="简介" prop="des">
              <el-input v-model="form.des" type="textarea" placeholder="请输入内容" :rows="8" />
            </el-form-item>

            <el-form-item label="视频" prop="des">
              <el-upload
                class="upload-demo"
                :action="uploadImgUrl"
                :on-remove="handleVideoRemove"
                :on-success="handleVideoSuccess"
                multiple
                :limit="1"
                accept="mp4"
                :file-list="videoList"
              >
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
            </el-form-item>
            <el-form-item label="标题图片" prop="titleImg">
              <el-row>
                <el-col :span="24" :class="{'hiddenupload':titleImgList.length}">
                  <el-upload
                    class
                    :action="uploadImgUrl"
                    :file-list="titleImgList"
                    :show-file-list="true"
                    list-type="picture-card"
                    :limit="1"
                    :on-success="handleAvatarSuccess"
                    :on-remove="handleAvatarRemove"
                    :on-preview="handlePictureCardPreview"
                  >
                    <i class="el-icon-plus"></i>
                  </el-upload>
                  <!-- <img v-if="imageUrl" :src="imageUrl" class="avatar" @click="imgPreview(imageUrl)" /> -->
                </el-col>
                <!-- <el-col :span="12">
              <el-button type="primary" @click="showLable(2)" round>标签图片</el-button>
                </el-col>-->
              </el-row>
            </el-form-item>
            <el-form-item label="详情图片" prop>
              <el-upload
                :action="uploadImgUrl"
                :file-list="imgShowList"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-exceed="uploadNumber"
                :multiple="true"
                :drag="true"
                :on-success="handleUploadSuccess"
                :limit="50"
                :on-remove="handleRemove"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>
            <div class="center">
              <el-button @click="close()">取消</el-button>
              <el-button type="primary" @click="submitForm('ruleForm')" v-loading="loading">提交</el-button>
            </div>
          </el-form>
        </div>
      </el-tab-pane>
    </el-tabs>

    <!-- 选择大区弹窗 -->
    <el-dialog :visible.sync="roleListVisible" v-loading="loadingSkin" width="40%" append-to-body>
      <el-table @cell-dblclick="gengerTitle" :data="roleList" style="width: 100%">
        <el-table-column prop="areaName" label="大区" width="180"></el-table-column>
        <el-table-column prop="grade" label="等级" width="180"></el-table-column>
        <el-table-column prop="roleJob" label="昵称"></el-table-column>
        <el-table-column prop="serverName" label="服务器"></el-table-column>
      </el-table>
    </el-dialog>
    <!-- 选择模板弹窗 -->
    <el-dialog title="模板类型" :visible.sync="dialogImgTypeVisible" width="30%" append-to-body>
      <el-radio-group v-model="modelType">
        <el-radio :label="1">正方模板</el-radio>
        <el-radio :label="2">长方模板</el-radio>
      </el-radio-group>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogImgTypeVisible = false">取 消</el-button>
        <el-button type="primary" @click="gengertiImge">确 定</el-button>
      </div>
    </el-dialog>
  </el-dialog>
</template>

<script>
import { getDicts } from "@/api/system/dict/data";
import {
  onePushAcount,
  pushAcount,
  listInfo,
  getInfo,
  auditInfo,
  delInfo,
  addInfo,
  updateInfo,
  exportInfo,
  getSupplyList,
  importTemplateHp,
  delAccount,
  byColums,
  allSale,
  deleteAllAccount,
  getImage,
  jymPush,
  upLoad
} from "@/api/info/info";
import { roleList, gengerTitle } from "@/api/gentitle/black";
export default {
  name: "pick",
  dicts: ["game_type", "account_status"],
  data() {
    return {
      title: "新增游戏账号",
      dialogVisible: false,
      loading: false,
      isEdit: false,
      isSCQ: false, //从生成器打开本弹窗
      wzry: false,
      actived: "王者荣耀",
      // 表单参数
      form: {
        guizufen: "",
        wuji: "",
        type: ""
      },
      //游戏大区
      regionalArr: [],
      levelArr: [],
      lableInput: null,
      lableType: null,
      imgFileList: [],
      imgShowList: [],
      titleImgList: [],
      videoList: [],
      ifSpecial: false,
      roleList: [],
      roleListVisible: false,
      loadingSkin: false,
      instancesUrl: [],
      skinList: [],
      jingmeie: null,
      dialogImgTypeVisible: false,
      modelType: null,
      uploadImgUrl: "",
      supplyList: [],
      rules: {}
    };
  },
  created() {
    // this.getSupplyList();
    this.uploadImgUrl = process.env.VUE_APP_BASE_API + "/upload/image";
  },
  methods: {
    // 游戏类型切换
    // tabs切换时触发
    tabChange() {
      this.form.type = this.actived;
      this.selectDialogGameType();
    },
    open(flag, data) {
      this.reset();
      if (flag == "edit") {
        this.title = "修改游戏账号";
        this.isEdit = true;
        this.handleUpdate(data);
      } else if (flag == "SCQ") {
        this.title = "上传账号";
        this.isSCQ = true;
        // 数据回显
        this.form.type = data.type;
        this.form.regional = data.areaName;
        this.form.level = data.shiming == 1 ? "有二次" : "包人脸";
        this.form.heroes = data.heroNum;
        this.form.skins = data.skinNum;

        this.form.campId = data.campId;
        this.form.guizuLevel = data.vipLevel;
        this.form.guizufen = data.nobNum;
        this.form.wuji = data.inscriptions;
        this.form.yinji = data.yinji;
        this.form.des = data.morInfo;
        console.log(
          "%c 🍢 this.form: ",
          "font-size:20px;background-color: #33A5FF;color:#fff;",
          this.form
        );

        if (data.detailImg && data.detailImg.length) {
          let arr = [];
          for (let img of data.detailImg) {
            arr.push({
              name: "游戏交易后台管理",
              url: img
            });
          }
          this.imgFileList = arr;
          this.imgShowList = JSON.parse(JSON.stringify(arr));
        }
        if (data.titleImg) {
          this.titleImgList = [{ url: data.titleImg, name: "" }];
        }
        if ("王者荣耀" == this.form.type) {
          this.wzry = true;
        }
      } else {
        this.isEdit = false;
        this.isSCQ = false;
      }
      this.dialogVisible = true;
    },
    // 重置
    reset() {
      this.form = {
        guizufen: "0",
        wuji: "0",
        type: ""
      };
      this.imgFileList = [];
      this.imgShowList = [];
      this.titleImgList = [];
      this.videoList = [];
    },
    /** 查询详情进行回显 */
    handleUpdate(row) {
      const id = row.id || null;
      this.wzry = false;
      getInfo(id).then(response => {
        this.form = response.data;
        if (response.data.urlArr) {
          this.imgFileList = response.data.urlArr;
          this.imgShowList = JSON.parse(JSON.stringify(response.data.urlArr));
        }
        if (response.data.titleImg) {
          this.titleImgList = [{ url: response.data.titleImg, name: "" }];
        }
        let video = {};
        this.videoList = [];
        this.changeSpecial();
        if (response.data.videoUrl) {
          video.name = response.data.videoName;
          video.url = response.data.videoUrl;
          this.videoList[0] = video;
        }
        if ("王者荣耀" == this.form.type) {
          this.wzry = true;
        }
      });
    },
    // 是否特价
    changeSpecial() {
      console.log(this.form.accType);
      if (1 == this.form.accType) {
        this.ifSpecial = false;
      } else {
        this.form.specialPrice = null;
      }
    },
    // 游戏类型改变
    selectDialogGameType() {
      let gameType = this.form.type;
      this.getSelectGameInfo(gameType);
      this.wzry = false;
      if ("王者荣耀" == gameType) {
        this.wzry = true;
      }
    },
    // 查询区服
    getSelectGameInfo(gameType) {
      console.log(gameType);
      getDicts(gameType + "段位").then(res => {
        if (res.code == 200) {
          this.levelArr = res.data;
        }
      });
      if ("和平精英" == gameType) {
        gameType = "王者荣耀";
      }
      getDicts(gameType).then(res => {
        if (res.code == 200) {
          this.regionalArr = res.data;
        }
      });
    },
    // 标签
    showLable(type) {
      if (1 == type) {
        this.lableInput = "2";
      } else {
        this.lableInput = "1";
      }
      this.lableType = type;
      this.addLableVisible = true;
    },
    // 一键获取
    gengerRole() {
      if (!this.form.campId) {
        this.$modal.msgError("请输入营地ID");
        return true;
      }
      let params = {};
      params.campId = this.form.campId;
      console.log(params);
      roleList(params).then(res => {
        if (res.code == 200) {
          this.roleList = res.data;
          this.roleListVisible = true;
        }
      });
    },
    // 选中大区
    gengerTitle(row) {
      this.loadingSkin = true;
      let queryParams = {};
      queryParams.campId = this.form.campId;
      queryParams.roleId = row.roleId;
      gengerTitle(queryParams).then(res => {
        if (res.code == 200) {
          this.instancesUrl = res.data.qiniuUrl;
          this.skinList = res.data.goodSkinName;
          this.formData = res.data.skinMap;
          var areaId = res.data.skinMap.areaId;
          if ("1" == areaId) {
            areaId = "安卓Q";
          } else if ("2" == areaId) {
            areaId = "苹果Q";
          } else if ("3" == areaId) {
            areaId = "安卓WX";
          } else if ("4" == areaId) {
            areaId = "苹果WX";
          }

          this.form.regional = areaId;
          this.form.heroes = res.data.skinMap.heroNum;
          this.form.skins = res.data.skinMap.skinNum;
          this.form.des = res.data.skinMap.ppxiangqing;
          // this.filesToInstances();
          this.jingmeie = this.skinList.join(" ");
          console.log(this.jingmeie);
          if (res.data.skinMap.game_Imprint) {
            this.form.yinji = res.data.skinMap.game_Imprint;
          }
          if (res.data.skinMap.noble_level) {
            this.form.guizuLevel = res.data.skinMap.noble_level;
          }
          this.roleListVisible = false;
        }
      });
    },
    // 选择模板弹窗
    showModel() {
      this.dialogImgTypeVisible = true;
    },
    // 选择模板后
    gengertiImge() {
      if ("1" == this.modelType) {
        this.model1();
      }
      if ("2" == this.modelType) {
        this.model2();
      }
      this.dialogImgTypeVisible = false;
    },
    model1() {
      if (!this.form.campId) {
        this.$modal.msgError("请输入营地ID");
      }
      this.getURLBase64("https://game.ikbh.top/logo/model1.jpg").then(res => {
        const imageaaa = new Image();
        imageaaa.src = res;
        imageaaa.onload = () => {
          const canvas = document.createElement("canvas");
          const context = canvas.getContext("2d");
          canvas.width = imageaaa.width;
          canvas.height = imageaaa.height;
          context.drawImage(imageaaa, 0, 0, imageaaa.width, imageaaa.height);
          context.fillStyle = "#fff"; // 文字填充颜色
          context.font = "33px Adobe Ming Std";

          var areaId = this.formData.areaId;
          if ("1" == areaId) {
            areaId = "安卓Q";
          } else if ("2" == areaId) {
            areaId = "苹果Q";
          } else if ("3" == areaId) {
            areaId = "安卓WX";
          } else if ("4" == areaId) {
            areaId = "苹果WX";
          }
          // let level = this.formData.heroNum
          // let one = this.formData.heroNum
          // let one =
          //   "英雄数量： " +
          //   this.formData.heroNum +
          //   "    " +
          //   "皮肤数量：  " +
          //   this.formData.skinNum +
          //   "      " +
          //   "战斗力：  " +
          //   this.formData.zhandouli +
          //   "      " +
          //   "水晶数量： " +
          //   this.formData.shuijingnum;

          let titlName =
            areaId +
            "(" +
            this.form.guizuLevel +
            ")" +
            "   编号 " +
            this.form.id;
          let skin = this.jingmeie.split(" ").splice(0, 19);
          context.fillStyle = "#ffff00";

          context.font = "40px Adobe Ming Std";

          context.fillText(titlName, 210, 60);

          let heroNum = this.formData.heroNum;
          let level = this.formData.jobName;
          let skins = this.formData.skinNum;
          let yinji = this.form.yinji;
          let wuji = this.form.wuji;
          let guizu = this.form.guizufen;

          context.font = "35px Adobe Ming Std";
          context.fillStyle = "#ffff00";
          context.fillText(heroNum, 200, 195);
          context.fillText(level, 600, 195);
          context.fillText(skins, 200, 235);
          context.fillText(yinji, 600, 235);
          context.fillText(wuji, 200, 275);
          context.fillText(guizu, 600, 275);

          context.font = "normal bold 30px Adobe Ming Std";
          context.fillStyle = "#ff3399";
          var x1 = 15;
          var h = 360;
          skin.map((item, index) => {
            if (index < 35) {
              if (index % 4 == 0) {
                x1 = 60;
                //控制行高
                h = h + 60;
              }
              context.fillText(skin[index], x1, h);
              //控制列间隔
              x1 = x1 + 180;
            }
          });

          context.font = "normal bold 40px Adobe Ming Std";
          context.fillStyle = "#ffff00";
          //营地ID
          let campId = this.formData.yingdiIdsd;
          context.fillText(campId, 300, 770);
          const base64Url = canvas.toDataURL("image/jpeg", this.quality);
          this.titleimgurl = base64Url;
          this.downloadFile("游戏交易后台管理", base64Url);
          let blo = this.base64ToBlob(base64Url);
          let formData = new FormData();
          formData.append("file", blo);
          postUpload(formData)
            .then(res => {
              this.titleImgList = [{ url: res.msg, name: "" }];
              this.form.titleImg = res.msg;
              this.loadingSkin = false;
            })
            .catch(e => {});
        };
      });
    },
    model2() {
      this.getURLBase64("https://game.ikbh.top/logo/back-img.jpg").then(res => {
        const imageaaa = new Image();
        imageaaa.src = res;
        imageaaa.onload = () => {
          const canvas = document.createElement("canvas");
          const context = canvas.getContext("2d");
          canvas.width = imageaaa.width;
          canvas.height = imageaaa.height;
          context.drawImage(imageaaa, 0, 0, imageaaa.width, imageaaa.height);
          context.fillStyle = "#fff"; // 文字填充颜色
          context.font = "33px Adobe Ming Std";

          var areaId = this.formData.areaId;
          if ("1" == areaId) {
            areaId = "安卓Q";
          } else if ("2" == areaId) {
            areaId = "苹果Q";
          } else if ("3" == areaId) {
            areaId = "安卓WX";
          } else if ("4" == areaId) {
            areaId = "苹果WX";
          }

          let one =
            "英雄数量： " +
            this.formData.heroNum +
            "    " +
            "皮肤数量：  " +
            this.formData.skinNum +
            "      " +
            "战斗力：  " +
            this.formData.zhandouli +
            "      " +
            "水晶数量： " +
            this.formData.shuijingnum;

          let two =
            "贵族等级： " +
            this.formData.heroNum +
            "    " +
            "贵族积分  " +
            this.formData.skinNum +
            "      " +
            "五级铭文：  " +
            this.formData.zhandouli +
            "      " +
            "王者印记： " +
            this.formData.shuijingnum;

          let titlName = areaId;
          let skin = this.skinList;
          context.fillStyle = "#fff";

          context.font = "66px Adobe Ming Std";

          context.fillText(titlName, 750, 130);

          context.font = "45px Adobe Ming Std";
          context.fillStyle = "#6BE61A";
          context.fillText(one, 150, 210);
          context.fillText(two, 150, 270);

          context.font = "33px Adobe Ming Std";
          context.fillStyle = "#fff";
          var x1 = 150;
          var h = 310;
          skin.map((item, index) => {
            if (index < 35) {
              if (index % 7 == 0) {
                x1 = 150;
                h = h + 80;
              }
              console.log(x1);
              context.fillText(skin[index], x1, h);
              x1 = x1 + 220;
            }
          });

          context.font = "33px Adobe Ming Std";
          context.fillStyle = "#09F7F7";
          context.fillText("营地ID：" + this.form.campId, 700, 800);
          const base64Url = canvas.toDataURL("image/jpeg", this.quality);
          this.downloadFile("游戏交易后台管理", base64Url);
          this.titleimgurl = base64Url;
          let blo = this.base64ToBlob(base64Url);
          let formData = new FormData();
          formData.append("file", blo);
          postUpload(formData)
            .then(res => {
              this.titleImgList = [{ url: res.msg, name: "" }];
              this.form.titleImg = res.msg;
              this.loadingSkin = false;
            })
            .catch(e => {});
        };
      });
    },
    downloadFile(fileName, content) {
      let aLink = document.createElement("a");
      let blob = this.base64ToBlob(content); // new Blob([content]);
      let evt = document.createEvent("HTMLEvents");
      evt.initEvent("click", true, true); // initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
      aLink.download = fileName;
      aLink.href = URL.createObjectURL(blob);
      aLink.dispatchEvent(
        new MouseEvent("click", {
          bubbles: true,
          cancelable: true,
          view: window
        })
      ); // 兼容火狐
    },

    getURLBase64(url) {
      return new Promise((resolve, reject) => {
        var xhr = new XMLHttpRequest();
        xhr.open("get", url, true);
        xhr.responseType = "blob";
        xhr.onload = function() {
          if (this.status === 200) {
            var blob = this.response;
            var fileReader = new FileReader();
            fileReader.onloadend = function(e) {
              var result = e.target.result;
              resolve(result);
            };
            fileReader.readAsDataURL(blob);
          }
        };
        xhr.onerror = function() {
          reject();
        };
        xhr.send();
      });
    },

    filesToInstances() {
      let instancesUrl = this.instancesUrl;
      const length = instancesUrl.length;
      let instances = [];
      let finished = 0;
      instancesUrl.forEach((file, index) => {
        this.getURLBase64(file).then(res => {
          const image = new Image();
          image.src = res;
          image.onload = () => {
            // 图片实例化成功后存起来
            instances[index] = image;
            finished++;
            if (finished === length) {
              this.drawImages(instances);
            }
          };
        });
      });

      // https://game.ikbh.top/logo/kuang.jpeg
    },
    drawImages(images) {
      const heights = images.map(item => item.height);
      const canvas = document.createElement("canvas");
      const widths = images.map(item => item.width);
      let sumWidth = Math.max.apply(null, widths);
      // canvas.width = sumWidth;
      canvas.width = 1500;
      // canvas.height = eval(heights.join("+"));
      // canvas.height = eval(heights.join("+"));
      canvas.height = heights.length * 1200;
      const context = canvas.getContext("2d");

      let y = 0;

      images.forEach((item, index) => {
        // const height = heights[index];
        // const width = widths[index];
        const height = 1200;
        const width = 1500;
        context.drawImage(item, 0, y, width, height);
        y += height;
      });
      const base64Url = canvas.toDataURL("image/jpeg", 0.2);
      this.downloadFile("11", base64Url);
    },
    base64ToBlob(code) {
      let parts = code.split(";base64,");
      let contentType = parts[0].split(":")[1];
      let raw = window.atob(parts[1]);
      let rawLength = raw.length;
      let uInt8Array = new Uint8Array(rawLength);

      for (let i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i);
      }
      return new Blob([uInt8Array], { type: contentType });
    },

    uploadNumber(file, fileList) {
      //限制图片数量
      this.$modal.msgError("最多只能上传50张图片");
    },
    handleRemove(response, fileList, file) {
      const that = this;
      // 1.获取将要删除图片的临时路径
      const filePath = response.url;

      // 2.找到图片对应的索引值
      this.imgFileList.forEach(function(element, key) {
        if (element.url === filePath) {
          that.imgFileList.splice(key, 1); //传给后台的图片
        }
      });
      console.log(this.imgFileList);
    },
    handleVideoSuccess(res, file) {
      if (res.code == 200) {
        console.log(res);
        this.form.videoUrl = res.data.filePath;
        this.form.videoName = res.data.fileName;
      }
    },
    handleVideoRemove(response, fileList, file) {
      this.form.videoUrl = "";
      this.form.videoName = "";
    },
    handleUploadSuccess(res, file, fileList) {
      if (res.code == 200) {
        let url = res.data.filePath;
        let name = res.data.fileName;
        let param = {};
        param.url = url;
        param.name = name;
        this.imgFileList.push(param);
      }
    },
    // 图片预览
    handlePictureCardPreview(file) {
      this.$viewerApi({
        images: [file.url]
      });
    },
    imgPreview(url) {
      this.$viewerApi({
        images: [url]
      });
    },
    // 标题图片移除
    handleAvatarRemove(response, file) {
      console.log(file);
      console.log(response);
      this.form.titleImg = "";
      this.titleImgList = [];
    },
    // 标题图片上传成功
    handleAvatarSuccess(res, file) {
      if (res.code == 200) {
        let url = res.data.filePath;
        let name = res.data.fileName;
        let param = {};
        param.url = url;
        param.name = name;
        this.titleImgList.push(param);
        this.form.titleImg = res.data.filePath;
      }
    },
    // 供货人列表
    getSupplyList() {
      getSupplyList("supplyCustomer").then(res => {
        if (res.code == 200) {
          this.supplyList = res.data;
        }
      });
    },
    handleSelectionChange(val) {
      console.log(val);
      this.checkSuperList = val;
    },
    submitForm(formName) {
      if ("3" == this.form) {
        this.$modal.msgError("终端数据无法编辑！！！,请联系供货商");
        return true;
      }
      this.$refs["form"].validate(valid => {
        // this.form.urlArr = this.imgFileList;
        if (valid) {
          this.form.urlArr = this.imgFileList;
          if (this.isEdit) {
            // 编辑
            const that = this;
            this.form.interType = "edit";
            updateInfo(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.dialogVisible = false;
              this.$parent.getList();
            });
          } else {
            this.form.interType = "add";
            addInfo(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.dialogVisible = false;
              this.$parent.resetQuery();
            });
          }
        }
      });
    },
    close() {
      this.dialogVisible = false;
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.ruleForm.id = this.info.id;
    }
  }
};
</script>
<style scoped lang="css">
.center {
  text-align: center;
}
.form-box {
  height: calc(100vh - 20vh - 100px);
  overflow-y: auto;
  overflow-x: hidden;
}
.form-box >>> .el-input {
  width: 250px;
}
.form-box >>> .lattle-input .el-input {
  width: 170px;
}
.form-box >>> .lattle-input2 .el-input {
  width: 110px;
}
.form-box >>> .big-input .el-input {
  width: 100%;
}

.form-box >>> img {
  width: 100%;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.hiddenupload >>> .el-upload--picture-card {
  display: none;
}
/* .form-box >>> .el-upload{
  text-align: left;
} */
.form-box >>> .el-upload-dragger {
  width: 148px;
  height: 148px;
}
>>> .el-dialog__body{
  padding: 10px;
}
</style>
